<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1--0  记录分享</title>
  <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
  <style>
  body{
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #1D1F21;
  }
  header {
    border-bottom: 1px solid rgb(51, 51, 51);
    height: 160px;
  }
  .logo{

      width: 220px;
      margin: 0 auto;
      padding-top: 20px;
      /* border: 1px solid burlywood; */
  }
  .logo > span {
      font-size: 100px;
      font-family: Snap ITC
  }

  .t1 {
      color: #E94134;      
  }
  .t2 {
      color: #4385F6;
  }
  .t3 {
      color: #33A754;
  }
  .t4 {
      color: #FBBD06;
  }

  .titleBtns {
      text-align: center;
      vertical-align: middle;
      width: 400px;
      margin: 10px auto;
      z-index: 10;
  }

  .btn {
      margin: 5px;
      display: inline-block;
      text-align: center;
      width: 100px;
      color:burlywood;
      border:1px solid #1D1F21;
      border-radius: 8px;
      cursor:default;
  }
  .btn:hover {
      border:1px solid burlywood;
  }
  .titleBack {
    overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    /* border: red 1px solid; */
  }
  .title {
    position: absolute;
    top: 0;
    left: 0;
    /* border: #4385F6 1px solid; */
    width: 100%;
  }
  </style>
</head>

<body>
    <header>     
        <canvas id="canvas" class="titleBack"></canvas>
        <div class="title">
            <div class="logo animated bounceIn">            
                <img src="./images/1--0.png" alt="logo" width="220">
            </div>
            <nav class="titleBtns">
                <div class="btn">Home</div>
                <div class="btn">Github</div>
                <div class="btn">Email</div>
            </nav>
        </div>
    </header>
    
<script>
        var ctx = document.getElementById('canvas'),
            content = ctx.getContext('2d'),
            round = [],
            WIDTH,
            HEIGHT,
            initRoundPopulation = 10;
    
    
        WIDTH = document.getElementsByTagName('header')[0].clientWidth;
        HEIGHT = document.getElementsByTagName('header')[0].clientHeight;
        
        ctx.width = WIDTH;
        ctx.height = HEIGHT;
    
        function Round_item(index, x, y) {
            this.index = index;
            this.x = x;
            this.y = y;
            // this.r = Math.random() * 2 + 1;
            this.r = Math.random() * 2;
            // var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
            var alpha = (Math.floor(Math.random() * 10) + 1) / 15 ;
            this.color = "rgba(255,255,255," + alpha + ")";
        }
        Round_item.prototype.draw = function () {
            content.fillStyle = this.color;
            content.shadowBlur = this.r * 2;
            content.beginPath();
            content.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            content.closePath();
            content.fill();
        };
    
        function animate() {
            content.clearRect(0, 0, WIDTH, HEIGHT);
    
            for (var i in round) {
                round[i].move();
            }
            requestAnimationFrame(animate)
        }
    
        Round_item.prototype.move = function () {
            this.y -= 0.15;
            if (this.y <= -10) {
                this.y = HEIGHT + 10;
            }
            this.draw();
        };
    
    
        function init() {
            for (var i = 0; i < initRoundPopulation; i++) {
                round[i] = new Round_item(i, Math.random() * WIDTH, Math.random() * HEIGHT);
                round[i].draw();
            }
            animate();
    
        }
    
        init();

    </script>
</body>
</html>